<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./nprogress.css">
    <script src="./nprogress.js"></script>
    <style>
        #nprogress .bar {
            background: skyblue !important;
            height: 6px !important;
            position: fixed;
            z-index: 10;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <script type="text/javascript">
        NProgress.configure({
            easing: 'linear', // 缓冲动画类型，可选值如'ease'、'linear'等 
            // speed: 50, // 动画速度，单位为毫秒 
            trickleSpeed: 200, // 每次进度条步进的速度，单位为毫秒 
            showSpinner: false, // 是否显示环形进度动画 
            minimum: 0.2 // 设置开始时最低百分比  同inc
        });
        // 开始加载：调用
        NProgress.start() //方法来启动进度条。


        // NProgress.set(n)    //方法来设置进度条的进度，其中n的取值范围为0到1。
        // NProgress.inc(n)    //方法来产生一个随机增量，使进度条前进一段距离。

        // 加载完成：调用
        NProgress.done()    //方法来结束进度条。此时，进度条会缓慢加载到100%，并逐渐消失。
    </script>
</body>

</html>